<template>
  <div class="orderBox">
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="pageInfo.pagenum"
        v-model:page-size="pageInfo.pagesize"
        :page-sizes="[5, 10, 15, 20]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        @size-change="getOrderList"
        @current-change="getOrderList"
      />
    </div>
    <el-table :data="tableData" border width="800px">
      <el-table-column label="#" type="index" width="50"/>
      <el-table-column label="是否发货" prop="is_send" width="100"/>
      <el-table-column label="订单价格" prop="order_price" width="100"/>
      <el-table-column label="是否支付" prop="pay_status" width="100"/>
      <el-table-column label="操作" width="150">
        <template #default="{  }">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="编辑"
            placement="left-start"
          >
          <el-button type="primary" :icon="'User'" circle />
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="角色授权"
            placement="top"
          >
            <el-button type="success" :icon="'Check'" circle />
          </el-tooltip>

          <el-popconfirm title="真的要删除这个用户吗？" >
            <template #reference>
              <el-button type="danger" :icon="'Delete'" circle />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 地图 -->
    <el-dialog
      v-model="mapDialog"
      title="位置"
      width="70%"
    >
    <div class="mapBox" id="container"></div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="mapDialog = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script>
import jsonp from 'jsonp'
export default {
  name: 'oaOrder',
  data () {
    return {
      tableData: [],
      pageInfo: {
        query: '',
        pagenum: 1,
        pagesize: 5,
        total: 200
      },
      mapDialog: true
    }
  },
  methods: {
    // 获取订单列表
    async getOrderList () {
      const orderList = await this.$http.get('orders', { params: this.pageInfo })
      if (orderList.meta.status !== 200) return
      this.pageInfo.total = orderList.data.total
      this.tableData = orderList.data.goods
    },
    initMap () {
      const map = new window.BMapGL.Map('container')

      var point = new window.BMapGL.Point(116.404, 39.915)

      map.centerAndZoom(point, 15)

      map.enableScrollWheelZoom(true)

      map.setHeading(64.5)

      map.setTilt(73)

      const marker = new window.BMapGL.Marker(point)
      map.addOverlay(marker)
    }
  },
  created () {
    this.getOrderList()
    jsonp('https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=s4BGofY6D8r2SoInjNNW3QD7jDRssips', () => {
      this.initMap()
    })
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-table--fit{
  width: 500px;
}
.mapBox{
  border: 1px solid black;
  height: 380px;
}
</style>
